<template>
	<public-view navType="voideIndex" topBgShow="6" :isTabbar="true" tabbarType="2">
		<view class="content">
			<view class="live-video-list w-100 f-w-w flex j-c-b a-i-s" v-if="topTab === 0">
				<view class="w-100 flex j-c-b live-list f-w-w">
					<view class="item flex" @click="goTo({url:'/pages/live/index/openLive'})" v-show="false">
						<image class="bgimg" src="https://oss.baodika.com/uploads/20230614/21b2352c84cde9ea4ff1429b2512ec74.jpg" mode=""></image>
						<!-- <view class="live-video-info-box">
							<view class="live-video-status f-s-20 color-fff">
								<text class="l-h-36" style="color: #ffB900;">直播中</text><text class="" style="color: rgba(255,255,255,0.4);margin: 0 12rpx;">|</text>人气值8826
							</view>
						</view> -->
						<view class="live-video-info-box">
							<view class="live-video-status f-s-20" style="color: rgba(255,255,255,0.7);">
								<text class="l-h-36">已结束</text><text class="" style="margin: 0 12rpx;">|</text>人气值8826
							</view>
							<view class="info-box">
								<view class="user-box flex a-i-c" style="color: rgba(255,255,255,0.7);">
									<image class="avatar" src="@/static/logo.png" mode=""></image>
									尤里urey
								</view>
								<view class="f-s-24 color-fff f-w-b w-100 l-h-32">
									尤里在分享AE特效制作过程
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="video-swiper" v-if="topTab === 1">
				<!-- @scroll="videoScroll" -->
				<scroll-view  @scrolltolower="scrolltolower" :scroll-y="true" style="height: 100%;" :scroll-with-animation="true"
					:scroll-into-view="'a'+video_current">
					<view style="position: relative;height: 100%;" :id="'a'+index" v-for="(item, index) in video_list"
						:key="'a'+index" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove" :data-current="index">
						<!-- <image src="@/static/logo.png" mode=""></image> -->
						<view class=""  @click.stop="pause" style="width: 100%;height: 100%;">
							<dom-video v-if="video_current == index || video_current=='z'" :ref="'domVideo'+index" :src="item.url" :autoplay="true" :loop="true" :controls="false"></dom-video>
						</view>
						<view class="share-like-comment-box">
							<view class="box-item flex f-d-c a-i-c color-fff f-s-24 l-h-30" @click.stop="likeVideo" :data-item="item" :data-index="index">
								<image class="icon" v-if="!item.like_state" src="@/static/images/live/like-icon.svg" mode=""></image>
								<image class="icon" v-else src="@/static/images/live/like-active.svg" mode=""></image>
								{{item.likes||0}}
							</view>
							<view class="box-item flex f-d-c a-i-c color-fff f-s-24 l-h-30"
								@click="openPopup('commentPopup')">
								<image class="icon" src="@/static/images/live/common-icon.svg" mode=""></image>
								{{item.comments||0}}
							</view>
							<view class="box-item flex f-d-c a-i-c color-fff f-s-24 l-h-30"
								@click="openPopup('sharepopup')">
								<image class="icon" src="@/static/images/live/share-icon.svg" mode=""></image>
								{{item.shares||0}}
							</view>
							<view class="box-item flex f-d-c a-i-c color-fff f-s-24 l-h-30"
								@click.stop="starVideo" :data-item="item" :data-index="index">
								<image class="icon" v-if="!item.star_state" src="@/static/images/live/un-star.svg" mode=""></image>
								<image class="icon" v-else src="@/static/images/live/star-active.svg" mode=""></image>
								{{item.stars||0}}
							</view>
						</view>
						<view class="video-user-info" @click="goTo({url:'/pages/live/myLiveCenter?user_id='+item.user_id})">
							<view class="user-info flex a-i-c color-fff f-s-28">
								<image class="avatar" :src="item.user.avatar || ''" mode=""></image>
								{{item.user.nickname||""}}
							</view>
							<view class="video-desc color-fff f-s-28 l-h-42">
								{{item.content || '' }}
							</view>
							<view class="tags f-s-24 color-fff l-h-34">
								#{{item.views||0}}人浏览过
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="" slot="popup">
		</view>
	</public-view>
	<uni-popup ref="sharepopup" type="bottom" mask-background-color="rgba(0,0,0,0)">
		<view class="share-content flex f-d-c a-i-c">
			<view class="title f-s-24 color-fff all-center">
				转发
			</view>
			<view class="w-100 flex a-i-c item-box">
				<view class="item color-fff f-s-24 flex f-d-c a-i-c">
					<image class="item-icon" src="@/static/images/weixinicon.svg" mode=""></image>
					微信
				</view>
				<view class="item color-fff f-s-24 flex f-d-c a-i-c">
					<image class="item-icon" src="@/static/live/friend-circle.svg" mode=""></image>
					朋友圈
				</view>
				<view class="item color-fff f-s-24 flex f-d-c a-i-c">
					<image class="item-icon" src="@/static/live/link-icon.svg" mode=""></image>
					链接
				</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="commentPopup" type="bottom" mask-background-color="rgba(0,0,0,0)" safe-area>
		<view class="comment-box flex f-d-c a-i-c" :class="show_more_comment?'height100':''">
			<view class="w-100 a-i-c flex color-fff f-s-24 j-c-b top-viewa" :style="{height,paddingTop}">
				<view class="">
					<image v-if="show_more_comment" @click="closePopup('commentPopup')" class="back-icon-comment"
						src="@/static/images/nav-back-white.svg" mode=""></image>
				</view>
				<view class="">
					评论（{{video_list[video_current].comments || 0}}条）
				</view>
				<view class="config-box">
					<block v-if="!show_more_comment">
						<image class="open-big" src="@/static/live/open-big-icon.svg" mode="" @click="showMoreComment">
						</image>
						<image class="close-icon" src="@/static/live/close-icon-live.svg" mode=""
							@click="closePopup('commentPopup')"></image>
					</block>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-view-comment"
				:style="{height:'calc(100% - '+height+' - 132rpx)'}">
				<view class="comment-item-box flex f-d-c">
					<view class="item flex" v-for="(item, index) in comment_list" :key="index">
						<view class="avatar">
							<image class="image" :src="item.user?.avatar" mode=""></image>
						</view>
						<view class="comment-info-text-box">
							<view class="user-name">
								{{item.user?.nickname ||""}}
							</view>
							<view class="comment-text l-h-36 color-fff">
								{{item.content}}
							</view>
							<view class="coment-time-address-box f-s-24 color-999 flex a-i-c l-h-36" 
								@click="backCommentMsg"
								:data-item="item"
								:data-index="index"
							>
								1小时前<text class="dian"></text>河北<view class="reback-button color-fff">
									回复
								</view>
							</view>
							<block v-for="(itm, idx) in item.last_reply?.data" :key="'b'+idx">
								<view class="back-comment-box flex">
									<image class="avatar-back" :src="itm.user?.avatar" mode=""></image>
									<view class="user-name-back-box">
										<view class="user-name-box f-s-30 l-h-42">
											{{itm.user?.nickname}}
										</view>
										<view class="color-fff f-s-26 l-h-42">
											{{itm.content}}
										</view>
										<view class="coment-time-address-box f-s-24 color-999 flex a-i-c l-h-36">
											1小时前<text class="dian"></text>河北
										</view>
									</view>
								</view>
							</block>
							<view class="open-more-comment color-999 f-s-24">
								—展开全部回复
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="user-send-msg">
				<view class="input-box flex j-c-b a-i-c">
					<input type="text" v-model="comment_text" class="f-s-24 input-text color-fff" :placeholder="comment_placeholder"
						placeholder-style="color:rgba(255,255,255,0.48)">
					<view class="send-btn f-s-26 color-fff all-center" @click="sendComment">
						发送
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	import {
		goTo
	} from "@/nav.js"
	export default {
		components: {
			"dom-video": isDomVideo
		},
		data() {
			return {
				show_more_comment: false,
				isIphone: false,
				paddingTop: '',
				top_number: '',
				height: "",
				is_pause: false,
				video_current: 0,
				is_move: false,
				scrollX:0,
				startX:0,
				video_list:[],
				comment_list:[],
				comment_text:"",
				comment_type:0,
				comment_placeholder:"说点什么吧~",
				comment_pid:0,
				comment_top_id:0,
				comment_back_index:0,
				comment_item:null,
				look_star_time:0,
				lng:"",
				lat:""
			};
		},
		computed: {
			topTab() {
				return this.$store.state.live_tab
			}
		},
		onLoad() {
			this.iniPopup()
		},
		onShow() {
			this.getVideoList()
			this.getMyLocation()
			this.$refs["domVideo"+this.video_current][0].play()
		},
		onHide() {
			this.$refs["domVideo"+this.video_current][0].pause()
		},
		methods: {
			goTo,
			scrolltolower(){
				//滚动到底部
			},
			getMyLocation(){
				let that = this
				that.$location.myGetLocation((res)=>{
					uni.showLoading({
						title:"地址解析中..."
					})
					that.lng = res.longitude
					that.lat = res.latitude
				},false, true)
			},
			getVideoList(){
				let that = this
				that.util.getRequest({
					url:"v1/find/list",
					data:{}
				}).then(res=>{
					that.look_star_time = (new Date().getTime()/1000).toFixed(0)
					that.video_list = res.data.data
					this.util.getRequest({
						url:"v1/find/view",
						data:{
							id:that.video_list[0].id
						}
					}).then(res => {
						that.video_list[0].views = res.data.views
					})
				})
			},
			likeVideo(e){
				const item = e.currentTarget.dataset.item
				const index = e.currentTarget.dataset.index
				const that = this
				that.util.postRequest({
					url:"v1/find/like",
					data:{
						id:item.id
					}
				}).then(res=>{
					console.log(res,"likeRes")
					if(item.like_state){
						that.video_list[index].like_state = false
						that.video_list[index].likes--
					}else{
						that.video_list[index].like_state = true
						that.video_list[index].likes++
					}
				})
			},

			starVideo(e){
				const item = e.currentTarget.dataset.item
				const index = e.currentTarget.dataset.index
				const that = this
				that.util.postRequest({
					url:"v1/find/star",
					data:{
						id:item.id
					}
				}).then(res=>{
					console.log(res,"starRes")
					if(item.star_state){
						that.video_list[index].star_state = false
						that.video_list[index].stars--
					}else{
						that.video_list[index].star_state = true
						that.video_list[index].stars++
					}
				})
			},
			touchStart(e) {
				this.startX = e.touches[0].clientY;
			},
			touchMove(e) {
				const moveX = e.touches[0].clientY;
				const deltaX = moveX - this.startX;
				this.scrollX -= deltaX;
				this.startX = moveX;
			},
			touchEnd(e) {
				// 滑动结束后，根据滑动距离决定是否切换到下一个滑动项
				const threshold = 1; // 滑动阈值
				const currentIndex = Math.round(-this.scrollX / uni.upx2px(375)); // 每个滑动项宽度为 375px，根据实际情况修改

				// 计算新的 scrollX 位置
				this.scrollX = -currentIndex * uni.upx2px(375);

				// 你可以在这里触发 Swiper 切换事件或执行其他操作
				console.log('当前滑动项索引:', currentIndex);
				if(currentIndex>0){
					if(this.video_current > 0){
						this.video_current--
					}
				}else if(currentIndex<0){
					if(this.video_current < this.video_list.length-1){
						this.video_current++
						this.lookVideoEnd()
					}
				}else{
					// this.$forceUpdate()
					let cache = this.video_current;
					this.video_current = 'z'
					this.$nextTick(() => {
						this.video_current = cache
					})
				}
				this.scrollX = 0;
				this.startX = 0;
			},
			lookVideoEnd(){
				let date = new Date()
				let time = Number((date.getTime()/1000).toFixed(0))
				let stime = Number(this.look_star_time)
				if(time-stime>=10){
					this.util.getRequest({
						url:"v1/find/view",
						data:{
							id:this.video_list[this.video_current].id
						}
					}).then(res => {
						that.video_list[this.video_current].views = res.data.views
					})
				}
			},
			videoScroll(e) {
				const scrollTop = e.detail.scrollTop;
				
				// 判断用户滑动方向
				if (scrollTop > this.lastScrollTop + 50 && this.is_move) {
					if(this.video_current !== 0){
						this.video_current++
					}
					console.log('从上到下滑动');
				} else if (scrollTop < this.lastScrollTop - 50 && this.is_move) {
					this.video_current--
					console.log('从下到上滑动');
				} 

				// 更新上一次的滚动位置
				this.lastScrollTop = scrollTop;
			},
			startTouch(e) {
				this.is_move = true
				console.log(e, "startTouch")
			},
			endTouch(e) {
				this.is_move = false
				console.log(e, ":endTouch")
			},
			pause() {
				if (this.is_pause) {
					this.$refs["domVideo"+this.video_current][0].pause()
				} else {
					this.$refs["domVideo"+this.video_current][0].play()
				}
				this.is_pause = !this.is_pause
			},
			showMoreComment() {
				this.show_more_comment = true
			},
			iniPopup() {
				let sys = uni.getSystemInfoSync()
				this.isIphone = sys.model.indexOf("iPhone") < 0 ? false : true
				this.paddingTop = sys.statusBarHeight + 'px'
				this.top_number = sys.statusBarHeight + (this.isIphone ? 44 : 48)
				this.height = (sys.statusBarHeight + (this.isIphone ? 44 : 48)) + 'px'
			},
			closePopup(text) {
				this.show_more_comment = false
				this.comment_text = ""
				this.comment_pid = 0
				this.comment_top_id = 0
				this.comment_placeholder = "说点什么吧~"
				this.comment_type = 0
				this.comment_item = this.video_list[this.video_current]
				this.$refs[text].close()
			},
			openPopup(text) {
				this.$refs[text].open()
				this[text]()
			},
			sendComment(){
				const item = this.video_list[this.video_current]
				const that = this
				that.util.postRequest({
					url:"v1/find/comment",
					data:{
						find_id: item.id,
						content: that.comment_text,
						pid: that.comment_pid,
						top_pid: that.comment_top_id,
						lng:that.lng,
						lat:that.lat
					}
				}).then(res=>{
					if(that.comment_type === 0){
						that.comment_list.push(res.data)
					}else{
						that.comment_list[that.comment_back_index].last_reply.data.push(res.data)
					}
					that.comment_pid = 0
					that.comment_top_id = 0
					that.comment_type = 0
					that.comment_back_index = 0
					that.comment_text = ""
				})
			},
			backCommentMsg(e){
				const that = this
				let {item,index} = e.currentTarget.dataset
				this.comment_back_index = index
				this.comment_type = 1
				this.comment_placeholder = `@${item.user.nickname}`
				this.comment_pid = item.id
				this.comment_top_id = item.id
				this.comment_item = item
				// that.util.postRequest({
				// 	url:"v1/find/comment",
				// 	data:{
				// 		find_id: item.id,
				// 		content: that.comment_text,
				// 		pid: 0,
				// 		top_pid: 0
				// 	}
				// }).then(res=>{
				// 	console.log(res,"sendComment")
				// 	if(that.comment_type === 0){
				// 		that.comment_list.push(res.data)
				// 	}
				// 	that.comment_text = ""
				// })
			},
			commentPopup(){
				const item = this.video_list[this.video_current]
				const that = this
				this.comment_item = item
				that.util.getRequest({
					url:"v1/find/comment_list",
					data:{
						pid:item.id,
						type:that.comment_type,
						rows:10,
						page:0
					}
				}).then(res=>{
					console.log(res,"commentPopup")
					if(that.comment_type === 0){
						that.comment_list = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.live-video-list {
		height: 100vh;
		// position: fixed;
		// z-index: 3;
		// top: 0;
		// left: 0;
		background-color: #333333;
		padding: 30upx;

		.live-list {
			.item {
				border: 2upx solid #333333;
				width: 328upx;
				height: 328upx;
				border-radius: 12upx;
				margin-bottom: 32upx;
				position: relative;
				overflow: hidden;

				.live-video-info-box {
					position: absolute;
					z-index: 2;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;

					.info-box {
						width: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 14upx;
						background: rgba(0, 0, 0, 0.6);
						border-radius: 0 0 12upx 12upx;

						.user-box {
							margin-bottom: 8upx;

							.avatar {
								width: 32upx;
								height: 32upx;
								margin-right: 8upx;
								border-radius: 50%;
							}
						}
					}

					.live-video-status {
						padding: 6upx 12upx;
						background: rgba(0, 0, 0, 0.6);
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 12upx 0 12upx 0;
					}
				}

				.bgimg {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.user-send-msg {
		width: 100%;
		padding: 32upx;

		.input-box {
			width: 100%;
			background: rgba(255, 255, 255, 0.3);
			padding-left: 28upx;
			border-radius: 36upx;

			.send-btn {
				width: 140upx;
				height: 72upx;
				background: linear-gradient(78.2deg, #FBB10B 0%, #FB3A0B 100%);
				border-radius: 36upx;
			}

			.input-text {
				width: calc(100% - 28upx - 140upx);
			}
		}
	}

	.scroll-view-comment {
		width: 100%;
		padding: 24upx;
		box-sizing: border-box;

		.comment-item-box {
			width: 100%;

			.item {
				width: 100%;
				padding-bottom: 20upx;
				margin-bottom: 20upx;
				border-bottom: 2upx solid rgba(255, 255, 255, 0.25);

				.comment-info-text-box {
					width: 570upx;

					.back-comment-box {
						width: 600upx;
						margin-top: 8upx;

						.avatar-back {
							width: 40upx;
							height: 40upx;
							border-radius: 50%;
							margin-right: 16upx;
						}

						.user-name-back-box {
							.user-name-box {
								color: #AFB0B3;
								margin-bottom: 8upx;
							}
						}
					}

					.coment-time-address-box {
						.reback-button {
							margin-left: 16upx;
						}

						.dian {
							width: 6upx;
							height: 6upx;
							margin: 0 8upx;
							background: #999;
							border-radius: 50%;
						}
					}

					.comment-text {
						margin-bottom: 10upx;
					}

					.user-name {
						color: #AFB0B3;
						margin-bottom: 8upx;
					}
				}

				.avatar {
					width: 96upx;
					height: 96upx;
					margin-right: 28upx;
					border-radius: 50%;
					overflow: hidden;

					.image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.comment-box {
		width: 100%;
		position: relative;
		border-radius: 32upx 32upx 0 0;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(20upx);
		height: 1080upx;
		transition: height .2s linear;

		.top-viewa {
			padding: 0 30upx;

			.back-icon-comment {
				width: 26upx;
				height: 26upx;
			}

			.config-box {
				.open-big {
					width: 28upx;
					height: 28upx;
					margin-right: 32upx;
				}

				.close-icon {
					width: 28upx;
					height: 28upx;
				}
			}

			.title {
				// height: 74upx;
			}
		}

	}

	.share-content {
		width: 750upx;
		background: rgba(0, 0, 0, 0.8);
		height: 400upx;
		backdrop-filter: blur(20upx);

		.title {
			height: 74upx;
		}

		.item-box {
			padding: 24upx;
		}

		.item {
			margin-right: 62upx;

			.item-icon {
				width: 64upx;
				height: 64upx;
				margin-bottom: 16upx;
			}
		}
	}

	.video-user-info {
		position: absolute;
		bottom: 190upx;
		padding-left: 32upx;
		width: 434upx;

		.video-desc {
			width: 100%;
			margin-bottom: 16upx;
		}

		.user-info {
			margin-bottom: 24upx;

			.avatar {
				width: 64upx;
				height: 64upx;
				margin-right: 16upx;
				background: #ffffff;
				border-radius: 50%;
			}

			.name {}
		}
	}

	.share-like-comment-box {
		position: absolute;
		bottom: 180upx;
		right: 30upx;

		.box-item {
			margin-bottom: 50rpx;

			.icon {
				width: 64upx;
				height: 64upx;
				margin-bottom: 8upx;
			}
		}
	}

	.video-swiper {
		width: 750upx;
		height: 100vh;
		position: fixed;
		z-index: 3;
		top: 0;
		left: 0;
		background-color: #000;

		.swiper {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.height100 {
		height: 100vh;
	}

	.content {
		width: 750upx;
		position: relative;
	}
</style>